<template>
  <div class="BManagement">
    <div class="add" ref="add" v-show="isAddType">
      <el-tabs type="border-card">
        <el-tab-pane label="新增计费项目">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="计费项目名称"
                  prop="payname"
                  class="inline-form-item"
                >
                  <el-input v-model="ruleForm.payname"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="项目优先级"
                  prop="paylevel"
                  class="inline-form-item"
                >
                  <el-input v-model="ruleForm.paylevel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="项目用量/时长"
                  prop="paynum"
                  class="inline-form-item"
                >
                  <el-input v-model="ruleForm.paynum"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="项目价格"
                  prop="paymoney"
                  class="inline-form-item"
                >
                  <el-input v-model="ruleForm.paymoney"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="通知状态"
                  prop="paystatus"
                  class="inline-form-item"
                >
                  <el-select
                    v-model="ruleForm.paystatus"
                    placeholder="2"
                    style="width: 100%"
                  >
                    <el-option label="已通知" value="1"></el-option>
                    <el-option label="未通知" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="计费目录"
                  prop="c_id"
                  class="inline-form-item"
                >
                  <el-select
                    v-model="ruleForm.c_id"
                    placeholder="请选择状态"
                    style="width: 100%"
                  >
                    <el-option label="电费目录" value="7"></el-option>
                    <el-option label="水费固定月目录" value="8"></el-option>
                    <el-option label="水费按量目录" value="9"></el-option>
                    <el-option label="天然气目录" value="10"></el-option>
                    <el-option label="物业费目录" value="11"></el-option>
                    <el-option label="宽带费目录" value="12"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 富文本 -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="项目详情" prop="paycontent">
                  <quill-editor
                    v-model="ruleForm.paycontent"
                    :options="editorOption"
                    style="height: 300px; margin-bottom: 50px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div class="buts">
        <el-row>
          <el-button type="primary" icon="el-icon-back" @click="goBack"
            >返回</el-button
          >
        </el-row>
        <el-row>
          <el-button type="primary" icon="el-icon-download">保存</el-button>
        </el-row>
        <el-row>
          <el-button type="primary" icon="el-icon-s-promotion" @click="Submit"
            >提交
          </el-button>
        </el-row>
      </div>
    </div>
    <div class="look" ref="look" v-show="!isAddType">
      <el-tabs type="border-card">
        <el-tab-pane label="计费项目查看">
          <div class="info-row">
            <div class="info-label">
              <p>计费项目名称：</p>
            </div>
            <div class="info-content">
              <span>{{ list.payname }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-label">
              <p>项目优先级：</p>
            </div>
            <div class="info-content">
              <span>{{ list.paylevel }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-label">
              <p>项目用量/时长：</p>
            </div>
            <div class="info-content">
              <span>{{ list.paynum }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-label">
              <p>项目价格：</p>
            </div>
            <div class="info-content">
              <span>{{ list.paymoney }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-label">
              <p>通知状态：</p>
            </div>
            <div class="info-content">
              <span>{{ list.paystatus }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-label">
              <p>通知人：</p>
            </div>
            <div class="info-content">
              <span v-if="list.paystatus == 1">已通知</span>
              <span v-else-if="list.paystatus == 2">未通知</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-label">
              <p>通知内容：</p>
            </div>
            <div class="info-content">
              <span>{{ list.costcontent }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="buts">
        <el-row>
          <el-button type="primary" icon="el-icon-back" @click="goBack"
            >返回</el-button
          >
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      isAddType: false, // 添加初始化
      ruleForm: {
        payname: "",
        paylevel: "",
        paynum: "",
        paymoney: "",
        paystatus: "",
        c_id: "",
        paycontent: "",
      },
      rules: {
        payname: [
          { required: true, message: "请输入计费项目名称", trigger: "blur" },
        ],
        paylevel: [
          { required: true, message: "请输入项目优先级", trigger: "blur" },
        ],
        paynum: [
          { required: true, message: "请输入项目用量/时长", trigger: "blur" },
        ],
        paymoney: [
          { required: true, message: "请输入项目价格", trigger: "blur" },
        ],
        paystatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        c_id: [{ required: true, message: "请选择种类", trigger: "change" }],
      },
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗、斜体、下划线、删除线
            ["blockquote", "code-block"], // 引用、代码块
            [{ header: 1 }, { header: 2 }], // 标题1、标题2
            [{ list: "ordered" }, { list: "bullet" }], // 有序列表、无序列表
            [{ script: "sub" }, { script: "super" }], // 下标、上标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题级别
            [{ color: [] }, { background: [] }], // 字体颜色、背景色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除格式
            ["link", "image", "video"], // 链接、图片、视频
          ],
        },
        placeholder: "请输入项目详情...",
        theme: "snow",
      },
      list: {},
    };
  },
  methods: {
    // 提交Submit
    Submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认要新增此计费项目吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              axios
                .post(`http://community.byesame.com/cost/addCostData`, {
                  payname: this.ruleForm.payname,
                  paylevel: this.ruleForm.paylevel,
                  paynum: this.ruleForm.paynum,
                  paymoney: this.ruleForm.paymoney,
                  paystatus: this.ruleForm.paystatus,
                  c_id: this.ruleForm.c_id,
                  paycontent: this.ruleForm.paycontent, // 添加富文本内容
                  coststatus: 2,
                  token: localStorage.getItem("token"),
                })
                .then((res) => {
                  this.$message.success("新增成功！");
                  this.goBack();
                })
                .catch((error) => {
                  this.$message.error("新增失败，请重试");
                  console.error("提交失败", error);
                });
            })
            .catch(() => {
              this.$message.info("已取消新增");
            });
        } else {
          this.$message.error("新增信息不能为空");
          return false;
        }
      });
    },
    goBack() {
      this.$router.go(-1); // 或指定返回路径
    },
    // look详情
    XQlook() {
      axios
        .get("http://community.byesame.com/cost/getCostDetail", {
          params: {
            id: this.$route.query.detailId,
            token: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log("详情信息", res.data[0]);
          this.list = res.data[0];
        })
        .catch((error) => {
          console.error("获取详情失败", error);
          this.$message.error("获取详情失败，请重试");
        });
    },
  },
  created() {
    this.isAddType = this.$route.query.type === "ADD";
    this.XQlook();
  },
};
</script>

<style scoped>
.demo-ruleForm {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.el-row:last-child {
  margin-bottom: 0;
}

.inline-form-item {
  display: flex;
  align-items: center;
}

.inline-form-item ::v-deep .el-form-item__content {
  margin-left: 0 !important;
  flex: 1;
}

.inline-form-item ::v-deep .el-form-item__label {
  padding-right: 10px;
  white-space: nowrap;
}

.el-input,
.el-select {
  width: 100%;
}

.buts {
  position: fixed;
  right: 20px;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
}

.buts .el-row {
  margin: 0;
}

.buts .el-button {
  width: 100px;
  margin: 0;
}

/* look */
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  white-space: nowrap; /* 新增：确保整行不换行 */
}

.info-label {
  width: auto; /* 改为自动宽度 */
  padding-right: 10px;
  text-align: right;
  font-weight: bold;
  flex-shrink: 0; /* 防止标签被压缩 */
}

.info-label p {
  margin: 0;
  display: inline; /* 改为行内元素 */
  white-space: nowrap; /* 防止文字换行 */
}

.info-content {
  flex: 1;
  min-width: 0; /* 允许内容区域缩小 */
}

.info-content span {
  margin: 0;
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 新增富文本编辑器样式 */
.ql-container {
  min-height: 200px;
}

/* 确保富文本编辑器在表单中的显示 */
.el-form-item__content {
  line-height: normal;
}
</style>